<template>
    <div class="questionNaire">
        <div class="questionNaireWrap" v-if="!finishSubmit">
            <!--页面头部-->
            <div class="headMsg">满意度调查问卷</div>
            <!--头部图片-->
            <div class="questionImg">
                <img src="../../img/quesTitle.png" alt="">
                <div class="describeMsg">
                尊敬的客户：<br>
                您好。感谢您牺牲宝贵的时间参加此次的调研。
                今天我公司的理财顾问 {{empName}}（工号{{empNo}}）与您进行了电话沟通。请您对本次服务进行评价，以便后续为您提供更高质量服务。再次感谢。
                </div>
            </div>
            <!--问卷列表-->
            <div class="questionList" v-for="(item,key) in questionList" :key="key">
                <!--问题-->
                <div class="questionNo">
                    <!--题目-->
                    <div class="questionTitle">{{item.questionOrderNum}}.<span class="colorRed" v-if="item.isRequired">【必填】</span>{{item.questionTitle}}</div>
                    <!--答案-->
                    <div class="questionItem" v-if="item.questionType==0" v-for="(answerItem,k) in item.questionItemList" :key=k>

                        <!--<input-radio :radioName=" 'radio_' + item.questionOrderNum" v-model=item.customerAnswerResultVOList></input-radio>-->

                        <div class="radioBox">  
                            <input type="radio" 
                            :name=item.questionOrderNum 
                            :value=answerItem.contentOrderNum
                            :questionOrderNum= "'qNo:' + item.questionOrderNum"
                            :contentOrderNum="'cNo:' + answerItem.contentOrderNum"
                            :questionContent="'qC:' + answerItem.questionContent"
                            v-model=item.customerAnswerResultVOList>
                            <label class="iconfont">&#xe615;</label>
                        </div>
                        <span class="checkItem"  @click="changeRadioChecked($event,item.questionType)">{{answerItem.questionContent}}</span>
                    </div>
                    <div class="questionMoreItem" v-if="item.questionType==1" v-for="(answerItem,k) in item.questionItemList" :key=k>
                        <input-checkbox 
                        :questionOrderNum= "'qNo:' + item.questionOrderNum" 
                        :contentOrderNum = "'cNo:' + answerItem.contentOrderNum"
                        :questionContent = "'qC:' + answerItem.questionContent"
                        v-model=item.customerAnswerResultVOList></input-checkbox>
                        <!-- :radioName=" 'radio_' + item.questionOrderNum" -->
                        <!-- <div class="checkbox">  
                            <input type="checkbox" :checked="checked" :name="radioName" :class="checked">
                            <label class="iconfont"></label>
                        </div>  -->
                        <span class="checkItem" @click="changeRadioChecked($event,item.questionType)">{{answerItem.questionContent}}</span>
                    </div>
                    <div class="userInput" v-if="item.questionType==4">
                        <input type="text" v-model="item.customerAnswerResultVOList" >
                    </div>
                </div>

            </div>
            <div class="zw" style="height:4rem"></div>
            <div class="button">
             <button class="submit" @click="submitAnswer($event)" htmdEvt='questionnairePage_submit'>提交</button>
            </div>
            <pop-text :popText="popMsg" :popShow="popShowFlag" :closeBtn=closeBtn :isConfirm=isConfirm :confirmBtn=confirmBtn></pop-text>
        </div>
        <div class="finishImg" v-else>
            <!--页面头部-->
            <div class="headMsg">满意度调查问卷</div>
            <img v-if="!finishSubmitMoreMsg" src="../../img/finishPic.png" alt="">
            <img v-else src="../../img/repeatSubmitPic.png" alt="">
            <span>{{finishSubmitMsg}}</span><br> 
            <span class="moreMsg" v-if="finishSubmitMoreMsg" v-html="finishSubmitMoreMsg"></span> 
        </div>
        <div class="loadingBox" v-if="showLoading">
            <mt-spinner type="snake" class="loading-more"   color="#3A7FFF"></mt-spinner>
        </div>
    </div>
</template>
<script  type="text/javascript">
// style="display:flex;justify-content: center;width:100%;height:800%;z-index:999;background:#fff"
import inputRadio from "@src/common/radio/radio";
import inputCheckbox from "@src/common/checkbox/checkbox";
import loading from "@src/common/loading/loading";
import popText from "@src/common/popText/popText";
//import splitUrl from "@common/js/splitUrl.js";

//import tipAction from "@common/components/otherComponents/tipAction/tipAction"

    export default {
        name: "questionnaire",
        props:{
            radioName: {
                type: String, 
                default: 'radio'  //默认为radio
            }
        },
        components: {
            inputRadio: inputRadio,
            inputCheckbox: inputCheckbox,
            popText:popText,
        },
        data(){
            return {
                popMsg:"",
                popShowFlag:false,
                isConfirm:false,
                canSubmit:false,
                finishSubmit:false,
                showLoading:false,
                finishSubmitMsg:"",
                finishSubmitUrl:"",
                finishSubmitMoreMsg:"",
                questionList:{},
                // questionList:[],
                isChecked: '', //默认为空
                checked: '',
                answerList:[],
                empName:"",//理顾姓名
                empNo:"",//理顾编号
                infoList:null,
            }
        },
        created(){
            // var aaa = "http://lgbh5.dev.chtwm.com/lgbCdn/homePage/questionnairePage/questionnairePage.html/?c=9b94a2c2aada7b01862e3c2a00359ed3&e=7519c54597fef597f828e2b419b5e644&a=584ba1728cf1421839f5b388ba965d8c&id=a7a1a83ee316d9b801e1e72982c8dc5c"
            // var aaa = "http://lgbh5.dev.chtwm.com/lgbCdn/homePage/questionnairePage/questionnairePage.html/?c=0c5edca300c8f72a2f8e3d1cf6e94bc3&e=7519c54597fef597f828e2b419b5e644&a=730ad3a5c2f33ccc266406a278e10c46&id=74171edba850147fcee0ab904513d6bd"
            let deUrl = decodeURI(window.location.href);
            // let deUrl = decodeURI(aaa);
            this.infoList = window.splitUrl(deUrl)
            this.getQuestionlist()
        },
        mounted(){},
        methods: {

            //点击答案切换radio
            changeRadioChecked(e,questionType){
                e.currentTarget.parentNode.firstChild.firstChild.checked= true;
            },

            getQuestionlist(){
                this.$axiosHttp.http({
                    url:apiUrl.questionList,
                    params: {
                        a:this.infoList.a,//问卷的唯一标识，通过短信发送的链接中携带
                        e:this.infoList.e,//理顾工号
                    },
                    method:'post'
                } ,
                (res) => {
                    //接口成功
                    this.questionList = Object.assign({},res.data.data.listCustomerQuestionVO);
                    this.empName = res.data.empName;
                    this.empNo = res.data.empNo;
                }
                // ,(res) => {
                //     // 接口错误
                //     let message = res.data.message ? res.data.message : '系统开小差啦，请联系系统管理员';
                //     console.log(message)
                // },(res) => {
                //     // 接口返回1000
                // }
                );
            },
            submitAnswer($event){
                this.answerList = [];//置空最终答案数组
                var singleChoiceQuestion = document.getElementsByClassName("questionItem");//单选题
                var radioList = []
                //拿到单选的所有选框
                for(var i=0;i<singleChoiceQuestion.length;i++){
                    radioList.push(singleChoiceQuestion[i].getElementsByTagName("input"))
                }
                for (let index = 0; index < radioList.length; index++) {
                    let obj = {};
                    const element = radioList[index][0];
                    if(element.checked){//将用户选择的选项对应的题号答案放入最终答案数组
                        obj.questionOrderNum = element.getAttribute("questionOrderNum").split(":")[1]//这样写是为了解决有警告的问题
                        obj.contentOrderNum = element.getAttribute("contentOrderNum").split(":")[1]
                        obj.customerAnswerResultVOList = [{answerResult:element.getAttribute("questionContent").split(":")[1]}]
                        this.answerList.push(obj)
                    }
                }
                var multipleChoiceQuestion = document.getElementsByClassName("questionMoreItem");//多选题
                var checkboxList = [];
                //拿到多选的所有选框
                for(var i=0;i<multipleChoiceQuestion.length;i++){
                    checkboxList.push(multipleChoiceQuestion[i].getElementsByTagName("input"))
                }
                var aaa = [];
                //将用户的选择收集起来
                for(var i=0;i<checkboxList.length;i++){
                    if(checkboxList[i][0].checked){
                        let obj = {}
                        obj.questionOrderNum = checkboxList[i][0].getAttribute("questionOrderNum").split(":")[1];
                        obj.contentOrderNum = checkboxList[i][0].getAttribute("contentOrderNum").split(":")[1];
                        obj.customerAnswerResultVOList = [{answerResult:checkboxList[i][0].getAttribute("questionContent").split(":")[1]}]
                        aaa.push(obj)
                    }
                }
                var bbb = [];
                var ccc = [];
                //将相同题目的答案整合到一起
                for(var i=0;i<aaa.length;i++){
                    var temp = bbb.indexOf(aaa[i].questionOrderNum);
                    if(temp == -1){
                        bbb.push(aaa[i].questionOrderNum);
                        ccc.push({
                            questionOrderNum:aaa[i].questionOrderNum,
                            contentOrderNum:aaa[i].contentOrderNum,
                            customerAnswerResultVOList:aaa[i].customerAnswerResultVOList,
                            })
                    }else{
                        ccc[temp].contentOrderNum += ","+ aaa[i].contentOrderNum
                        ccc[temp].customerAnswerResultVOList[0].answerResult += ","+ aaa[i].customerAnswerResultVOList[0].answerResult
                    }
                }
                //将多选的答案放入最终答案数组
                this.answerList = this.answerList.concat(ccc)
                //检查必答题目是否全部作答
                for (const key in this.questionList) {
                    if(this.questionList[key].questionType==4){
                        //当题目类型为填空题的时候将题目的答案组合并插入对应位置
                        if(this.questionList[key].customerAnswerResultVOList){
                            var qNo = this.questionList[key].questionOrderNum - 1;
                            this.answerList.splice(qNo,0,{questionOrderNum:qNo+1,contentOrderNum:""})
                            this.answerList[qNo].customerAnswerResultVOList = [{answerResult:this.questionList[key].customerAnswerResultVOList}]
                        }
                    }
                    if(this.questionList[key].isRequired){//判断是不是必填的问题
                        if(!this.answerList[key]){//如果答案列表对应的位置没有作答 提示有题目未作答
                            this.isConfirm = false;//不需要确认按钮
                            this.popShowFlag = true;
                            this.popMsg = "当前有题目没填写，请检查！"
                            return
                        }
                    }
                }
                console.log(this.answerList,"答案列表")
                this.isConfirm = true;//展示确认按钮
                this.popShowFlag = true;//展示弹框
                this.popMsg = "确认要提交吗?"
            },
            closeBtn(){//取消按钮和知晓按钮 关闭弹框
                this.popShowFlag = false;
            },
            confirmBtn(){//弹框点击确认时,提交答案
                this.canSubmit = true;//允许提交
                this.showLoading = true;
                this.popShowFlag = false;//关闭弹框
                this.sendAnswer()
            },
            sendAnswer(){
                // Indicator.open(); 
              
                if(this.canSubmit){
                    //提交答案
                    this.$axiosHttp.http({
                        method: "post",
                        url: apiUrl.submitAnswer,
                        data:{
                            a:this.infoList.a,//问卷的唯一标识，通过短信发送的链接中携带
                            c:this.infoList.c,//客户编号，经过DES加密后的
                            e:this.infoList.e,//理顾工号 经过des加密后的
                            id:this.infoList.id,//通话记录ID 经des加密
                            list: this.answerList,//问卷问题及答案列表
                        },
                        needFailCallback:true
                        }, (res) => {//首次提交成功后展示的页面信息
                            this.showLoading = false;
                            this.finishSubmit = true; 
                            this.finishSubmitMsg = "提交成功";
                        },(res)=>{//重复提交成功后展示的页面信息
                            this.showLoading = false;
                            this.finishSubmit = true; 
                            this.finishSubmitMsg = "提示信息";
                            this.finishSubmitMoreMsg = "<br><br>此次服务调研您已经提交过啦，很抱歉<br>暂不支持多次填写～"
                        })
                }
            },
            // isCheck(questionNo,answerNo){
            //     var questionTagNo = this.$el.getElementsByClassName("questionNo")[questionNo-1]
            //     var answerTagNo = questionTagNo.getElementsByClassName("questionItem")[answerNo-1]
            //     answerTagNo.firstChild.firstChild.checked= true;
            //     console.log(answerTagNo.firstChild.firstChild.getAttribute("checked"),"能拿到checked?")
            //     if(!answerTagNo.firstChild.firstChild.getAttribute("checked")){
            //         answerTagNo.firstChild.firstChild.checked= true;
            //         answerTagNo.firstChild.firstChild.setAttribute("checked", "checked");
            //     }else{
            //         answerTagNo.firstChild.firstChild.checked= false;
            //         answerTagNo.firstChild.firstChild.setAttribute("checked", "");
            //     }
            //     // 
            //     console.log(answerTagNo.firstChild.firstChild)
            //     // this.isChecked=!this.isChecked
            //     // if(this.isChecked){
            //         // this.checked = "checked"
            //     // }else{
            //         // this.checked = ""
            //     // }
            // },
        },
        watch : {
            //监听isChecked，改变checked状态
            // isChecked : {
            //     handler(newName, oldName){
            //         // console.log('radioname', this.radioName)
            //         // console.log('监听到组件new', newName)
            //         // console.log('监听到组件old', oldName)
            //         //改变时调用changeButton
            //         if(this.radioName){
            //             this.checked = "checked";
            //         }else{
            //             this.checked = "";
            //         }
            //     }
            // }
        }
    }
</script>
<style>
#checkbox{
    display: inline;
}
.questionNaire .loading-more {
    display: flex;
    justify-content: center;
    z-index: 999;
    background: rgba(0, 0, 0, .5);
    /* height: 667px; */
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    padding-top: 300px;
    margin: auto;
}
.questionNaireWrap{
    max-width: 920px;
    min-width: 7.5rem;
    width:100%;
    margin: 0 auto;
    background:#F7F9FC;
}
.questionNaireWrap .headMsg{
    width: 100%;
    height: 2.2rem;
    line-height: 2.2rem;
    text-align: center;
    background: white;
    color: #121C32;
    font-size: .85rem;
}
.questionNaireWrap .questionImg{
    width: 100%;
    height: 11.4rem;
    background-image: url("../../img/quesBg.png");
    position: relative;
}
.questionNaireWrap  .questionImg .describeMsg{
    position: absolute;
    top: 54.2%;
    left: 0.75rem;
    color: white;
    right: .75rem;
    text-align: justify;
}
.questionNaireWrap .questionImg img{
    width: 15.5rem;
    height: 3.65rem;
    position: absolute;
    top: 10.3%;
    left: 6.1%;
}
/* .questionNaireWrap .questionList{
    margin-bottom: 4rem;
} */
.questionNaireWrap .questionList .questionTitle .colorRed{
    color: red;
    vertical-align: top;
}
.questionNaireWrap .questionList .questionTitle{
    width: 92%;
    padding-top:1rem;
    padding-bottom: .8rem;
    padding-left: 0.75rem;
    padding-right: 0.75rem;
    font-size: 0.65rem;
}
.questionNaireWrap .questionList .questionItem,
.questionNaireWrap .questionList .questionMoreItem
{
    width:100%;
    padding-left: 0.75rem;
    padding-right: 0.75rem;
    background: #fff;
    border-bottom: #B2B6BF dashed .025rem;
    font-size: 0;
}
.questionNaireWrap .questionList .questionItem .checkItem,
.questionNaireWrap .questionList .questionMoreItem .checkItem
{
    line-height: 2.7rem;
    font-size: 0.65rem;
    color: #707A8D;
    width: 100%;
    height: 2rem;
}
.questionNaireWrap .questionList .userInput{
    width: 92%;
    height: 2.125rem;
    margin: 0 auto;
}
.questionNaireWrap .questionList .userInput input{width:100%;margin: 0 auto;}
.questionNaireWrap .questionList .questionItem:last-child,
.questionNaireWrap .questionList .questionMoreItem:last-child
{border-bottom:none}
.questionNaireWrap .questionList .questionNo{
    width: 100%;
    margin: 0 auto;
}
.questionNaireWrap .button{
    margin-left: 0.75rem;
    margin-right: 0.75rem;
    margin-top: 2rem;
    margin-bottom: 1.3rem;
}
.questionNaireWrap .submit{
    margin: 0 auto;
    /* width: 92%; */
    width: 17.25rem;
    height: 2.25rem;
    text-align: center;
    position: fixed;
    bottom: .75rem;
    border-radius: .1rem;
    background: -webkit-linear-gradient(left,#2E48FF,#44B0FF);
    color: #fff;
    font-size: .8rem;
    /* letter-spacing: .05275rem; */
}
.finishImg  .headMsg{
    width: 100%;
    height: 2.2rem;
    line-height: 2.2rem;
    text-align: center;
    background: white;
    color: #121C32;
    font-size: .85rem;
}
.finishImg {
    width: 100%;
    text-align: center;
}
.finishImg img{
    width: 3.7rem;
    margin: 5.5rem auto;
    margin-bottom: .8rem;
}
.finishImg span{
    width: .32rem;
    font-size: .8rem;
    color: #141C30;
    font-weight: bold;
}
.finishImg .moreMsg{
    color:#575859;
    font-weight: 500;
}
</style>
